import Vue from "vue";
import Router from "vue-router";
import Menu from "../views/sys/Menu";
import Role from "../views/sys/Role";
import User from "../views/sys/User";

import axios from "axios";
import store from "../store";

Vue.use(Router);

//重复点击路由错误配置
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
};

const routes = [
  {
    path: "/home",
    name: "Home",
    component: () => import("../views/Home.vue"),
    children: [
      // 这里配置的是子路由
      {
        path: "/index",
        name: "Index",
        component: () => import("../views/Index.vue")
      },
      // {
      //   path: "/sys/menus",
      //   name: "SysMenu",
      //   component: Menu
      // },
      // {
      //   path: "/sys/roles",
      //   name: "SysRole",
      //   component: Role
      // },
      // {
      //   path: "/sys/users",
      //   name: "SysUser",
      //   component: User
      // },
      {
        path: "/userCenter",
        name: "UserCenter",
        component: () => import("../views/UserCenter.vue")
      }
    ]
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login.vue")
  }
  // {
  //   path: "/",
  //   name: "Login",
  //   component: () => import("../views/Login.vue")
  // }
];

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

//路由守卫   to:跳转到哪一个路由  from：从哪路由来的  next：继续的操作
router.beforeEach((to, from, next) => {
  // if the user is not authenticated, `next` is called twice

  let hasRoute = store.state.menus.hasRoute;

  //判断全局是否存在缓存路由
  if (!hasRoute) {
    //获取导航信息
    axios
      .get("/sys/menu/anv", {
        headers: {
          Authorization: localStorage.getItem("token")
        }
      })
      .then(res => {
        console.log("----------路由守卫----------");
        console.log(res);
        //拿到menuList菜单列表
        console.log("导航菜单", res.data.data);
        // console.log("导航菜单", res.data.data.nav);
        store.commit("setMenuList", res.data.data.nav);

        //拿到用户权限
        store.commit("setPermList", res.data.data.authoritys);

        console.log(store.state.menus.menuList);
        console.log(store.state.menus.permList);

        //获取动态绑定路由菜单
        let newRouter = router.options.routes;

        //循环菜单
        res.data.data.nav.forEach(item => {
          if (item.children) {
            item.children.forEach(e => {
              //把数据信息中的路径转换成路由
              let route = menuToRouter(e);

              //把生成的路由添加到路由管理中
              if (route != null) {
                newRouter[0].children.push(route);
              }
            });
          }
        });

        //绑定
        newRouter.forEach(item => {
          router.addRoute(item);
        });
        console.log("路由信息", newRouter);

        //addRoute是vue3.0的用法 一次只能添加一个路由进去，addRoutes是vue2.0的方法，使用控制台会提示过时，所以使用3.0用法
        // router.addRoute(newRouter)
        // router.addRoutes(newRouter)
        //添加缓存
        hasRoute = true;
        store.commit("queryHasRoute", hasRoute);
      });
  }

  next();
});

//导航栏路由转换
const menuToRouter = menu => {
  if (menu.component == null) {
    return;
  }
  let router = {
    name: menu.name,
    path: menu.path,
    meta: {
      icon: menu.icon,
      title: menu.title
    },
    component: () => import("@/views/" + menu.component + ".vue")
  };

  return router;
};

export default router;

// export default new Router({
//   //用于去除访问地址的#
//   mode: "history",
//   routes: [
//     {
//       path: "/",
//       name: "Login",
//       component: () => import("../views/Login.vue")
//     },
//     {
//       path: "/home",
//       name: "Home",
//       component: () => import("../views/Home.vue"),
//       children: [
//         // 这里配置的是子路由
//         {
//           path: "/index",
//           name: "Index",
//           component: () => import("../views/Index.vue")
//         },
//         {
//           path: "/sys/menus",
//           name: "SysMenu",
//           component: Menu
//         },
//         {
//           path: "/sys/roles",
//           name: "SysRole",
//           component: Role
//         },
//         {
//           path: "/sys/users",
//           name: "SysUser",
//           component: User
//         },
//         {
//           path: "/userCenter",
//           name: "UserCenter",
//           component: () => import("../views/UserCenter.vue")
//         }
//       ]
//     },
//     {
//       path: "/login",
//       name: "Login",
//       component: () => import("../views/Login.vue")
//     }
//   ]
// });
